<template>
	<view class="wp">
		<view class="ul">
			<view class="li" @click="yindu">
				<view class="img">
					<image src="./img/fq1.jpg" mode=""></image>
				</view>
				<view class="p">
					孟加拉国
				</view>
			</view>
			<view class="li" @click="yindu">
				<view class="img">
					<image src="./img/fq2.jpg" mode=""></image>
				</view>
				<view class="p">
					不丹
				</view>
			</view>
			<view class="li" @click="yindu">
				<view class="img">
					<image src="./img/fq3.jpg" mode=""></image>
				</view>
				<view class="p">
					阿富汗
				</view>
			</view>
			<view class="li" @click="yindu">
				<view class="img">
					<image src="./img/fq4.jpg" mode=""></image>
				</view>
				<view class="p">
					印度
				</view>
			</view>
			<view class="li" @click="yindu">
				<view class="img">
					<image src="./img/fq5.jpg" mode=""></image>
				</view>
				<view class="p">
					尼泊尔
				</view>
			</view>
			<view class="li" @click="yindu">
				<view class="img">
					<image src="./img/fq6.jpg" mode=""></image>
				</view>
				<view class="p">
					斯里兰卡
				</view>
			</view>
			<view class="li" @click="yindu">
				<view class="img">
					<image src="./img/fq7.jpg" mode=""></image>
				</view>
				<view class="p">
					马尔代夫
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'yindu',
		data(){
			return{
				
			}
		},
		methods: {
		  yindu(){
		  	uni.navigateTo({
		  		url:'../user/gynb-a4.1'
		  	})
		  },
		}
	}
</script>

<style scoped>
	.wp{
		background: #f3f6fa;
	}
	.ul{
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding-top: 30rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.ul .li{
		width: 330rpx;
		height: 330rpx;
		background: #fff;
		border-radius: 30rpx;
		margin-top: 30rpx;
	}
	.ul .li .img{
		width: 330rpx;
		height: 246rpx;
	}
	.ul .li .img image{
		width: 100%;
		height: 100%;
	}
	.ul .li .p{
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #333;
		font-size: 30rpx;
		font-weight: 600;
	}
</style>
